<div class="row">
    <div class="col-lg-12">
        <div class="card card-outline-info">
            <div class="card-header">
                <h4 class="m-b-0 text-white">Template-Driven Form Sample</h4>
            </div>
            <div class="card-body">
                <form class="floating-labels" #form1="ngForm" (ngSubmit)="onSubmit()" novalidate>
                    <div class="form-body">
                        <h3 class="card-title">Person Info</h3>
                        <hr>
                        <div class="row p-t-20">
                            <div class="col-md-6">
                                <div class="form-group" opFormGroupValidationClass [formModel]="form1" [fieldModel]="name">
                                    <input type="text" class="form-control" id="name" name="name" minlength="4" #name="ngModel" [(ngModel)]="user.name" forbiddenValue="bob"
                                        required>
                                    <span class="bar"></span>
                                    <label for="name" opRequiredLabel>Name</label>
                                    <op-single-error-message [formModel]="form1" [fieldModel]="name" labelTitle="Name"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6" opFormGroupValidationClass [formModel]="form1" [fieldModel]="age">
                                <div class="form-group">
                                    <!-- Have NO idea why the min & max validation do not work. But in the reactive form, it works. -->
                                    <input type="number" class="form-control" id="age" name="age" #age="ngModel" [(ngModel)]="user.age" min="10" max="100" required>
                                    <span class="bar"></span>
                                    <label for="age" opRequiredLabel>Age</label>
                                    <op-single-error-message [formModel]="form1" [fieldModel]="age" labelTitle="Age"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group" opFormGroupValidationClass [formModel]="form1" [fieldModel]="password">
                                    <input type="password" class="form-control" id="password" name="password" [(ngModel)]="user.password" #password="ngModel"
                                        minlength="6" required>
                                    <span class="bar"></span>
                                    <label for="password" opRequiredLabel>Password</label>
                                    <op-single-error-message [formModel]="form1" [fieldModel]="password" labelTitle="Password"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group" opFormGroupValidationClass [formModel]="form1" [fieldModel]="confirmPassword">
                                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" [(ngModel)]="user.confirmPassword"
                                        #confirmPassword="ngModel" [valueNotMatch]="[password, confirmPassword]" minlength="2"
                                        required>
                                    <span class="bar"></span>
                                    <label for="confirmPassword" opRequiredLabel>Confirm Password</label>
                                    <op-single-error-message [formModel]="form1" [fieldModel]="confirmPassword" labelTitle="Confirm Password"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <select class="form-control p-0" id="gender" name="gender" [(ngModel)]="user.gender">
                                        <option *ngFor="let item of gender" [value]="item.id" [selected]="item.id === user.gender?.id">{{item.text}}</option>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="gender">Gender</label>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input name="group4" type="radio" id="likeBeef" class="radio-col-light-blue" [value]="true" [(ngModel)]="user.likeBeef" />
                                    <label for="likeBeef">Like Beef</label>
                                    <input name="group4" type="radio" id="notLikeBeef" class="radio-col-light-blue" [value]="false" [(ngModel)]="user.likeBeef"
                                    />
                                    <label for="notLikeBeef">NOT like Beef</label>
                                    <!-- <span class="bar"></span> -->
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="checkbox" id="likeBeefCheck" name="likeBeefCheck" [(ngModel)]="user.likeBeef" />
                                    <label for="likeBeefCheck">Like Beef</label>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <textarea class="form-control" rows="4" id="comment"></textarea>
                                    <span class="bar"></span>
                                    <label for="comment">Something about yourself</label>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <op-material-date-picker (confirmed)="onMaterialDateSelected($event)"></op-material-date-picker>
                                    <span class="bar"></span>
                                    <label for="mdate">Date Picker</label>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <h3 class="box-title m-t-40">Address</h3>
                        <hr>
                        <div class="row p-t-20">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <!--IMPORTANT: USE ngModelChange EVENT INSTEAD OF change EVENT TO GET THE SELECTED OBJECT VIA THE $event PARAMETER.-->
                                    <!--USE ngValue ATTRIBUTE INSTEAD OF value ATTRIBUTE BECAUSE THE value ATTRIBUTE ONLY CAN CONTAIN PRIME TYPE DATA.-->
                                    <!--IF YOU ARE WORKING ON SOME PRIME TYPES, LIKE string, number THE change EVENT AND value ATTRIBUTE WORK WELL.-->
                                    <!-- <select class="form-control p-0" id="timeZone" name="timeZone" (ngModelChange)="onTimeZoneChange($event)" [(ngModel)]="user.timeZone">
                                        <option *ngFor="let item of timeZones" [ngValue]="item">{{item.name}}</option>
                                    </select> -->
                                    <select class="form-control p-0" id="timeZone" name="timeZone" (ngModelChange)="onTimeZoneChange($event)" [(ngModel)]="user.timeZone">
                                        <option *ngFor="let item of timeZones" [value]="item.id">{{item.name}}</option>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="timeZone">Time Zone</label>
                                    <!-- <select class="selectpicker m-b-20 m-r-10" data-style="btn-warning ">
                                        <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
                                        <option data-tokens="mustard">Burger, Shake and a Smile</option>
                                        <option data-tokens="frosting">Sugar, Spice and all things nice</option>
                                    </select> -->
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <!-- If the value or ngValue equals to the ngModel, the option will be set as selected by Angular. -->
                                    <!-- ngValue binds to object, if you are expecting the auto-selected, please make sure the ngModel has the same object reference, not just struture. -->
                                    <select class="form-control p-0" id="timeZoneState" name="timeZoneState" [(ngModel)]="user.timeZoneState">
                                        <option *ngFor="let item of timeZoneStates" [value]="item.id">{{item.name}}</option>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="timeZoneState">Time Zone State</label>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                    </div>
                    <pre>
                        {{user | json}}
                    </pre>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-success">
                            <i class="fa fa-check"></i> Save</button>
                        <button type="button" class="btn btn-inverse">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Row -->